<template>
<el-dialog :visible.sync="visible" title="详情" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="100px">
        <el-row :gutter="30">
            <el-col :span="16">
                <el-form-item label="标题:">
                    <p class="txt">{{ dataForm.title }}</p>
                </el-form-item>
            </el-col>
              <el-col :span="8">
                <el-form-item label="类型:">
                    <p class="txt">
                          {{dataForm.type==0?'景点':dataForm.type==1?'美食':'住宿'}}
                    </p>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="发布时间:">
                    <p class="txt">{{ dataForm.releaseTime }}</p>
                </el-form-item>
            </el-col>
            <template v-if="dataForm.state==1">
                <el-col :span="8">
                    <el-form-item label="收藏数量:">
                        <p class="txt">{{ dataForm.careNum }}</p>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="点赞数量:">
                        <p class="txt">{{ dataForm.likeNum }}</p>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="评论数量">
                        <p class="txt">{{ dataForm.commentNum }}</p>
                    </el-form-item>
                </el-col>
            </template>
          
            <el-col :span="8">
                <el-form-item label="审核状态:">
                    <p class="txt">{{dataForm.state==0?'审核失败':dataForm.state==2?'待审核':'审核成功'}}</p>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="内容:">
                    <p class="txt">{{ dataForm.content }}</p>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="图片:">
                    <el-image v-for="(item,index) in picList" :key="index" style="width: 140px; height: 140px;margin-right:10px;border-radius:5px" :src="item" :preview-src-list="picList">
                    </el-image>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
    <template v-if="dataForm.state==1">
        <h3>评论列表</h3>
        <el-table :data="dataForm.comments" style="width: 100%" row-key="id" border default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column prop="headUrl" label="头像">
                <template slot-scope="scope">
                    <img :src="scope.row.headUrl" style="width:70px;height:70px" />
                </template>
            </el-table-column>
            <el-table-column prop="commentatorName" label="名称">
                <template slot-scope="scope">
                    {{scope.row.commentPid==scope.row.pid&&scope.row.pid!='0'?scope.row.commentatorName+'回复'+scope.row.pname:scope.row.commentatorName}}
                </template>
            </el-table-column>
            <el-table-column prop="content" label="内容"> </el-table-column>
            <el-table-column prop="createDate" label="时间"> </el-table-column>
            <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t("delete") }}</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
</el-dialog>
</template>

<script>
import debounce from "lodash/debounce";
export default {
    data() {
        return {
            picList: [],
            visible: false,
            dataForm: {
                type: 6,
                id: "",
                comments: [],

            },
        };
    },
    computed: {
        dataRule() {
            return {
                dictLabel: [{
                    required: true,
                    message: this.$t("validate.required"),
                    trigger: "blur",
                }, ],
                dictValue: [{
                    required: true,
                    message: this.$t("validate.required"),
                    trigger: "blur",
                }, ],
                sort: [{
                    required: true,
                    message: this.$t("validate.required"),
                    trigger: "blur",
                }, ],
            };
        },
    },
    methods: {
        init() {
            this.visible = true;
            this.$nextTick(() => {
                this.$refs["dataForm"].resetFields();
                if (this.dataForm.id) {
                    this.getInfo();
                }
            });
        },
        // 获取信息
        getInfo() {
            this.$http
                .get("/scenic/tripintrodution/details", {
                    params: {
                        type: 1,
                        id: this.dataForm.id
                    }
                })
                .then(({
                    data: res
                }) => {
                    if (res.code !== 0) {
                        return this.$message.error(res.msg);
                    }
                    this.dataForm = {
                        ...this.dataForm,
                        ...res.data,
                    };
                    this.picList = this.dataForm.pic.split(',')
                })
                .catch(() => {});
        },
        // 表单提交
        deleteHandle(id, index) {
            this.$confirm(this.$t('prompt.info', {
                'handle': this.$t('delete')
            }), this.$t('prompt.title'), {
                confirmButtonText: this.$t('confirm'),
                cancelButtonText: this.$t('cancel'),
                type: 'warning'
            }).then(() => {
                this.$http.delete("/scenic/tripintrodution/deleteComment", {
                    'data': [id]
                }).then(({
                    data: res
                }) => {
                    if (res.code !== 0) {
                        return this.$message.error(res.msg)
                    }
                    this.$message({
                        message: this.$t('prompt.success'),
                        type: 'success',
                        duration: 500,
                        onClose: () => {
                            this.dataForm.comments.splice(index, 1)
                        }
                    })
                }).catch(() => {})
            }).catch(() => {})
        },
    },
};
</script>

<style scoped>
.el-image-viewer__mask {
    opacity: 0.8
}

.txt {
    line-height: 40px;
    height: auto !important;
    margin: 0;
    overflow: hidden;
    padding: 0;
}
</style>
